import React from 'react';
import {
  View,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Modal,
} from 'react-native';
import PropTypes from 'prop-types';
import {formatDate, getRealSize} from '../utils';
import DatePicker from 'react-native-date-picker';
import ThemeStyles from '../utils/index';

export default class DateItem extends React.Component {
  static propsTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired,
    isRequire: PropTypes.bool,
    placeholder: PropTypes.string,
  };
  static defaultProps = {
    onChange: () => {},
    value: '',
    isRequire: false,
    placeholder: '',
  };

  state = {
    show: false,
  };

  onChange = value => {
    this.props.onChange(value);
  };

  render() {
    const {isRequire, value, placeholder} = this.props;
    const current = new Date();
    const valueStr = formatDate(value || current);
    return (
      <React.Fragment>
        <TouchableWithoutFeedback onPress={() => this.setState({show: true})}>
          <View style={Styles.container}>
            <Text style={Styles.value}>{value ? valueStr : placeholder}</Text>
            <View style={Styles.icon}>
              {isRequire && <Text style={Styles.require}>*</Text>}
            </View>
          </View>
        </TouchableWithoutFeedback>
        <Modal
          animationType="fade"
          visible={this.state.show}
          transparent={true}>
          <TouchableWithoutFeedback
            onPress={() => this.setState({show: false})}>
            <View
              style={Styles.mask}
              onPress={() => this.setState({show: false})}
            />
          </TouchableWithoutFeedback>
          <View style={Styles.contentContainer}>
            <View style={Styles.header}>
              <TouchableWithoutFeedback
                onPress={() => this.setState({show: false})}>
                <Text style={Styles.ok}>确认</Text>
              </TouchableWithoutFeedback>
            </View>
            <View style={Styles.content}>
              <DatePicker
                date={value || current}
                mode="date"
                minimumDate={current}
                onDateChange={this.onChange}
              />
            </View>
          </View>
        </Modal>
      </React.Fragment>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    borderColor: '#E8E8E8',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: getRealSize(4),
    backgroundColor: '#f6f6f6',
    paddingHorizontal: getRealSize(10),
    height: getRealSize(44),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  value: {
    fontSize: getRealSize(13),
    fontWeight: '400',
    color: '#999',
    width: getRealSize(188),
  },
  ok: {
    color: ThemeStyles,
  },
  contentContainer: {
    marginBottom: getRealSize(48),
    zIndex: 999,
  },
  content: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    padding: 0,
    flex: 1,
    backgroundColor: 'transparent',
  },
  mask: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, 0.6)',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: getRealSize(15),
    justifyContent: 'flex-end',
    paddingVertical: getRealSize(12),
    backgroundColor: '#F9F9F9',
  },
  require: {
    color: 'red',
    marginTop: getRealSize(4),
    marginLeft: getRealSize(4),
  },
  icon: {
    width: getRealSize(14),
    height: getRealSize(14),
  },
});
